<template>
  <div>
    <div class="banner-container">
      <swiper
        class="banner"
        :options="swiperListOption"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="item in swiperList">
          <img style="width: 100%;cursor: pointer;height: 440px;" :data-id="item.id" :src="item.adImagePath" alt="">
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination1"></div>
    </div>
    <div class="indexBg">
      <div class="login-box-container">
        <div class="login-container" v-if="!$store.state.user.token">
          <Login :title="'账号登录'"/>
        </div>
        <div class="account-container" v-else>
          <UserInfo/>
        </div>

        <div class="announcements">
          <header class="flex-container">
            <img src="~@assets/images/noticeV3.png" alt="">
            <span style="cursor:pointer;" @click="$router.push('/notice')">查看更多>></span>
          </header>
          <section>
            <ul>
              <li  v-for="item in noticeList" :key="item.id"  class="flex-container">
                <div class="date"><span>{{item.publisherTime.substring(8,11)}}</span>{{item.publisherTime.substring(0,7)}}</div>
                <div class="content">
                  <div class="title ellipsis-one" @click="toDetail(item.id,'notice')" :title="item.title">
                    {{item.title}}
                  </div>
                  <span class="ellipsis-two">{{$utils.setText(item.content)}}</span>
                </div>
              </li>
            </ul>
          </section>
        </div>

      </div>
      <div class="container clearfix">
        <div class="swiper">
          <el-carousel arrow="never" height="358px" indicator-position="outside">
            <el-carousel-item v-for="item in adsList" @click="toSwiper(item)" :key="item.id">
              <img :src="item.adImagePath" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="announcements">
          <header>
            <img src="~@assets/images/newsV3.png" alt="">
          </header>
          <section>
            <ul>
              <li v-for="item in officialtrainingList" :key="item.id" @click="toDetail(item.id,'officialtrainingAdmin')"
                  class="item ellipsis-one" :title="item.title">
                {{item.title}}
              </li>
            </ul>
          </section>
        </div>
      </div>



      <div class="recommend-course-container">
        <div class="recommend-course clearfix">
          <header>
            <h1>推荐课程</h1>
            <!-- <span @click="$router.push('/officialtrainingAdmin')">更多<i class="el-icon-arrow-right"></i> </span>-->
            <!--<img src="~@assets/images/more.png" alt="">-->
          </header>
          <section>
            <ul class="clearfix">
              <li v-for="item  in recommendCourseList" :key="item.id">
                <div class="course-img" @click="toClass(item.id)">
                  <img src="~@assets/images/course_login.png" v-real-img="item.picPath" alt="">
                </div>
                <div class="bottom">
                  <div class="title ellipsis-one" :title="$utils.unEscapeHTML(item.name)" @click="toClass(item.id)">
                    {{$utils.unEscapeHTML(item.name)}}
                  </div>
                  <div style="display: flex;justify-content: space-between;">
                    <span>{{item.teacherName}}</span>
                    <span> {{item.credit}}学时</span>
                  </div>
                </div>
              </li>
            </ul>
          </section>
        </div>
      </div>
      <div class="commone-asked-container">
        <div class="commone-asked">
          <header>
            <h1>帮助中心</h1>
          </header>
          <section>
            <div class="select-course-filter">
              <img src="~@assets/images/select-course-filterV3.png" alt="">
            </div>
            <div class="list" style="display: flex;justify-content: space-between;">
              <div style="cursor:pointer;" v-show="$store.state.app.footer.certificateQueryOpen == 1">
                <img @click="toCertificate" src="~@assets/images/certificateImgV3.png" alt="">
              </div>
              <div class="customerPhones" v-if="$store.state.app.footer.customerPhones">
                <div v-for="(item,index) in $store.state.app.footer.customerPhones" :key="index">
                  <span>{{item}}</span>
                </div>
              </div>
            </div>

          </section>

        </div>
      </div>
    </div>
    <!--飘窗-->
    <div id="Div2" style="position:relative;z-index: 99999;" v-show="pcImgList.length !== 0 && pcImgFlag">
      <img style="cursor:pointer;"  @click="openUrl(pcImgList[0].adOpenWay,pcImgList[0].adUrl)"
           :src="pcImgList[0] &&pcImgList[0].adImagePath" alt="">
      <i style="position:absolute;right: 10px;top: 10px;cursor:pointer;font-size: 18px;"
         class="el-icon-circle-close el-icon"  @click="pcImgFlag = false"></i>
    </div>
  </div>
</template>

<script>
  import index from './indexjs'

  export default {
    ...index
  }
</script>

<style  scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";
</style>
